<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>    
#box *{ margin:0; padding:0; list-style:none;}    
#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ width:200px; height:200px; float:left; padding:5px;}    
</style>    
<script>    
window.onload=function(){    
    var oBox=document.getElementById('box');    
    var oUl=oBox.children[0];    
    var aLi=oUl.children;    
         
    //复制一份内容 ，制作出无缝的效果   
    oUl.innerHTML+=oUl.innerHTML;    
    oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
         
    setInterval(function(){   //开定时器，这样就可以自己切换，无需人工干预。 
        var l=oUl.offsetLeft-10;  //图片切换，就是移动距离
        if(l<=-oUl.offsetWidth/2){    
            l=0;    
        }    
        oUl.style.left=l+'px';    
    },30);    
};    
</script>    
</head>
<body>
	<div id="box">    
    <ul>    
     	<li><img src="../dist/img/7.jpg" width="200"></li>    
       <li><img src="../dist/img/8.jpg" width="200"></li>    
       <li><img src="../dist/img/9.jpg" width="200"></li>    
       <li><img src="../dist/img/10.jpg" width="200"></li>      
   </ul>    
</div>
</body>
</html>